<template>
  <div>
    <!--  面包屑导航区域 -->
    <br>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>库存</el-breadcrumb-item>
    </el-breadcrumb>

    <!--  卡片视图区域-->
    <el-card >
      <!--搜索与添加区域-->
      <el-row :gutter="20">
        <el-col :span="3.5">
          <el-switch
            style="display: block;padding-top: 10px"
            v-model="searchStockState"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="条码查询"
            inactive-text="使用名称查询">
          </el-switch>
        </el-col>
        <el-col :span="7">
          <el-input placeholder="请输入商品编号或名称"
                    v-model="searchStockIDorName">
            <el-button slot="append" icon="el-icon-search"
                       @click="searchStock"></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addDialogVisible=true">
            添加库存</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="getStackTop20Item">Top20销量商品</el-button>
        </el-col>
      </el-row>

      <!--  库存清单页面区域  -->
      <el-table :data="this.stackList" border stripe height="490">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="商品编号" prop="itemBarcode" width="150px"></el-table-column>
        <el-table-column label="商品名称" prop="itemName" width="250px"></el-table-column>
        <el-table-column label="库存数量" prop="quantity"></el-table-column>
        <el-table-column label="30天内销量" prop="salesIn30Days"></el-table-column>
        <el-table-column label="单位" prop="unitOfMeasure"></el-table-column>
        <el-table-column label="售价" prop="price" ></el-table-column>
        <el-table-column label="进货价" prop="purchasePrice"></el-table-column>
        <el-table-column label="主要供货商" prop="mainSupplier"></el-table-column>

        <el-table-column label="操作" prop="quantity" width="100px">
          <template slot-scope="scope">
            <!--          减少库存按钮-->
            <el-tooltip  effect="dark" content="减少库存" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini"
                         @click="releaseStack(scope.row.itemBarcode)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--  添加库存的对话框-->
    <el-dialog title="添加库存"
               :visible.sync="addDialogVisible" width="50%"
               @close="addDialogClosed">
      <!--    内容主题区域-->
      <el-form :model="addForm" :rules="addFormRules"
               ref="addFormRef" label-width="100px">
        <el-row>
          <el-col :span="15">
            <el-form-item label="商品编号" prop="itemBarcode">
            <el-input v-model="addForm.itemBarcode"
                      placeholder="请输入商品编号"></el-input>
            </el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="15">
            <el-form-item label="商品名称" prop="itemName" >
              <el-input v-model="addForm.itemName"
                        placeholder="请输入商品名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商编号" prop="supplierID">
              <el-input v-model="addForm.supplierID"
                        placeholder="请输入已存在的供应商编号"></el-input>
            </el-form-item></el-col>
          <el-col :span="12" >
            <el-form-item label="商品单位">
              <el-select v-model="addForm.unitOfMeasure" placeholder="请选择商品单位">
                <el-option label="瓶" value="瓶"></el-option>
                <el-option label="袋" value="袋"></el-option>
                <el-option label="千克" value="千克"></el-option>
                <el-option label="箱" value="箱"></el-option>
                <el-option label="把" value="把"></el-option>
                <el-option label="个" value="个"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品数量" prop="quantity">
              <el-input v-model="addForm.quantity"
                        placeholder="请输入商品入库数量"></el-input>
            </el-form-item></el-col>
          <el-col :span="12" >
            <el-form-item label="批次进货价" prop="purchasePrice">
              <el-input v-model="addForm.purchasePrice"
                        placeholder="请输入批次进货价"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品售价" prop="price">
              <el-input v-model="addForm.price"
                        placeholder="请输入商品售价"></el-input>
            </el-form-item></el-col>
        </el-row>
      </el-form>

      <!--    底部区域-->
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addStockMsg">确 定 录 入</el-button>
  </span>
    </el-dialog>

    <!--  减少库存的对话框-->
    <el-dialog title="减少库存"
               :visible.sync="editDialogVisible" width="35%">
      <!--    内容主题区域-->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="150px">
        <el-form-item label="商品编号" prop="itemBarcode">
          <el-input v-model="editForm.itemBarcode" disabled></el-input>
        </el-form-item>
        <el-form-item label="进货单号" prop="batchNo">
          <el-input v-model="editForm.batchNo"
                    placeholder="请输入进货单号"></el-input>
        </el-form-item>
        <el-form-item label="供货商ID" prop="supplierID">
          <el-input v-model="editForm.supplierID"
                    placeholder="请输入供货商ID"></el-input>
        </el-form-item>
        <el-form-item label="减少库存数量" prop="quantity" >
          <el-input v-model="editForm.quantity"
                    placeholder="请输入减少库存数量"></el-input>
        </el-form-item>
      </el-form>

      <!--    底部区域-->
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editStackInfo">确 定</el-button>
  </span>
    </el-dialog>

    <!--入库成功清单对话框-->
    <el-dialog title="入库清单" :visible.sync="dialogVisible" width="40%" >
      <!--            内容主题区域-->
      <span>
              <div style="margin: 20px;"></div>
              <el-form label="right" label-width="130px">
              <el-form-item label="入库编号：">
                <el-input :disabled="true" v-model="totalPriceMsg.batchNo"></el-input>
              </el-form-item>
                <el-form-item label="入库时间：">
                  <el-input :disabled="true" v-model="totalPriceMsg.batchDateTime" ></el-input>
                </el-form-item>
                <el-form-item label="供应商编号：">
                  <el-input :disabled="true" v-model="totalPriceMsg.supplierID"></el-input>
                </el-form-item>
                <el-form-item label="入库商品编号：">
                  <el-input :disabled="true" v-model="totalPriceMsg.itemBarcode"></el-input>
                </el-form-item>
                <el-form-item label="数量：">
                  <el-input :disabled="true" v-model="totalPriceMsg.quantity"></el-input>
                </el-form-item>
                <el-form-item label="进价：">
                  <el-input :disabled="true" v-model="totalPriceMsg.purchasePrice"></el-input>
                </el-form-item>
              </el-form>
            </span>
      <!--            底部区域-->
      <span slot="footer" class="dialog-footer">
              <el-button type="primary"
                         @click="dialogVisible = false;this.getStackTop20Item">确 定</el-button>
            </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'Stock',
  data(){
    return{
      //商品清单显示列表
      stackList:[],
      //查询使用名称或ID标记
      searchStockState:true,
      searchFlag:{
      },
      //查询商品输入的编号或名称
      searchStockIDorName:'',
      //监听添加库存页面
      addDialogVisible:false,
      //监听减少库存页面
      editDialogVisible:false,
      //监听入库清单页面
      dialogVisible:false,
      //减少库存数据结构
      editForm:{},
      //添加表单验证规则
      editFormRules:{
        batchNo:[
          {required:true,message:'进货单号不得为空',trigger:'blur'},
        ],
        supplierID:[
          {required:true,message:'供货商ID不得为空',trigger:'blur'},
        ],
        quantity:[
          {required:true,message:'预期减少库存数量不得为空',trigger:'blur'},
        ]
      },
      //添加库存表单列表
      addForm:{
        itemBarcode: '',
        itemName: '',
        supplierID: '',
        unitOfMeasure: '',
        quantity: '',
        purchasePrice: '',
        price:''
      },
      //添加库存验证规则
      addFormRules:{
        itemBarcode:[
          {required:true,message:'商品编号不得为空',trigger:'blur'},
        ],
        itemName:[
          {required:true,message:'商品名称不得为空',trigger:'blur'},
        ],
        supplierID:[
          {required:true,message:'供货商ID不得为空',trigger:'blur'},
        ],
        unitOfMeasure:[
          {required:true,message:'商品单位不得为空',trigger:'blur'},
        ],
        quantity:[
          {required:true,message:'商品数量不得为空',trigger:'blur'},
        ],
        purchasePrice:[
          {required:true,message:'批次进货价不得为空',trigger:'blur'},
        ],
        price:[
          {required:true,message:'商品售价不得为空',trigger:'blur'},
        ],
      },
      //后端获取入库信息
      totalPriceMsg: {
        batchNo: '',
        batchDateTime: '',
        supplierID: '',
        itemBarcode:'',
        operation:'',
        quantity: '',
        purchasePrice: ''
      },
    }
  },
  created () {
    this.getStackTop20Item()
  },
  methods:{
    //post请求获取库存Top20列表
    async getStackTop20Item () {
      const { data: res } =
        await this.$http.post('/show20StocksWithSalesAndMainSupplier', [])
      if (res.code == 10401) {
        await this.$router.push('/login')
        return this.$message.error('您没有权限，请重新登陆！')
      }
      if (res.code == 10404)
        return this.$message.error('Sales Not Found！')
      if (res.code == 10200) {
        this.$message.success('Top20销量库存刷新成功！');console.log(res)
        let item=[]
        res.data.forEach(function(value, index) {
          item=item.concat({
          itemBarcode:value.itemBarcode,
          itemName:value.itemName,
          quantity:value.quantity,
          salesIn30Days:value.salesIn30Days,
          unitOfMeasure:value.unitOfMeasure,
          price:value.price,
          purchasePrice:value.purchasePrice,
          mainSupplier:value.mainSupplier
          })
        })
        this.stackList=item
        // this.stackList=res.data

         console.log(this.stackList)
      }
    },
    //post请求获取某件商品
    async searchStock(){
      if(!this.searchStockIDorName)
        return this.$message.error('查询失败，请输入商品编号或姓名！')
      let temp
      if(this.searchStockState){
        const{data}= await this.$http.post('/findStockByBarcodeWithSalesAndMainSupplier',
          {itemBarcode:this.searchStockIDorName})
        temp=data
      }
      if(!this.searchStockState)
      {
        const{data}= await this.$http.post('/findStockByNameWithSalesAndMainSupplier',
          {itemName:this.searchStockIDorName})
        temp=data
      }
      let res=temp
      if (res.code == 10401) {
        await this.$router.push('/login')
        return this.$message.error('您没有权限，请重新登陆！')
      }
      if (res.code == 10404) return this.$message.error('未查询到！')
      if (res.code == 10200){
        this.$message.success('查找成功！')
        let item=[]
        res.data.forEach(function(value, index) {
          item=item.concat({
            itemBarcode:value.itemBarcode,
            itemName:value.itemName,
            quantity:value.quantity,
            salesIn30Days:value.salesIn30Days,
            unitOfMeasure:value.unitOfMeasure,
            price:value.price,
            purchasePrice:value.purchasePrice,
            mainSupplier:value.mainSupplier
          })
        })
        this.stackList=item
        console.log(this.stackList)
      }
    },
    //减少库存按钮
    releaseStack(id){
      this.editForm.itemBarcode=id
      this.editDialogVisible=true
    },
    //post请求减少商品库存
    editStackInfo(){
      this.$refs.editFormRef.validate(async valid=> {
        if (!valid) return this.$message.error('修改失败，请正确输入！')
        console.log(this.editForm)
        //可以添减少库存的请求
        const { data: res } =
          await this.$http.post('/deleteStock', {
            itemBarcode:this.editForm.itemBarcode,
            batchNo:this.editForm.batchNo,
            supplierID:this.editForm.supplierID,
            quantity:this.editForm.quantity
          })
        console.log(res)
        if (res.code == 10401) {
          await this.$router.push('/login')
          return this.$message.error('您没有权限，请重新登陆！')
        }
        if (res.code == 10404)
          return this.$message.error('请求失败！')
        if (res.code == 10412)
          return this.$message.error('数量超出！')
        if (res.code == 10200) {
          //隐藏减少库存的对话框
          this.editDialogClosed()
          this.$message.success('修改成功！')
          //重新获取列表数据
          await this.getStackTop20Item()
        }
      })
    },
    //监听出库操作对话框的关闭事件
    editDialogClosed(){
      this.editDialogVisible=false
      this.$refs.editFormRef.resetFields()
    },
    //监听入库操作对话框的关闭事件
    addDialogClosed(){
      this.addDialogVisible=false
      this.$refs.addFormRef.resetFields()
    },
    //确定入库操作
    addStockMsg(){
      this.$refs.addFormRef.validate(async valid=> {
        if (!valid) return this.$message.error('修改失败，请正确输入！')
        //可以入库的请求
        let addItem={
          itemBarcode: this.addForm.itemBarcode,
          itemName: this.addForm.itemName,
          supplierID: this.addForm.supplierID,
          unitOfMeasure: this.addForm.unitOfMeasure,
          quantity: this.addForm.quantity,
          purchasePrice: this.addForm.purchasePrice,
          price: this.addForm.price
        }
        console.log(addItem)
        const { data: res } =
          await this.$http.post('/addStock',addItem)
        if (res.code == 10401) {
          await this.$router.push('/login')
          return this.$message.error('您没有权限，请重新登陆！')
        }
        if (res.code == 10404)
          return this.$message.error('入库失败，供货商不存在！')
        if (res.code == 10200) {
          this.$message.success('入库成功！')
          this.addDialogVisible=false
          this.totalPriceMsg=res.data
          this.dialogVisible = true
        }
      })
    },
  },
}
</script>

<style scoped>
.text {
  font-size: 14px;
}
.item {
  padding: 18px 0;
}
</style>
